<template>
	<view>
		<unifab  @dragClick="qrcodeClick" marginLeft='-110rpx' imageBackgroundSize='100% 100%' width='220rpx' height='220rpx' creatTop="80" creatLeft="50" image="../../static/saoma.png" imageWidth="130upx"></unifab>
		<unifab @dragClick="refresh" creatTop="80" creatLeft="85" imageBackgroundSize='100% 100%'  width='100rpx' height='100rpx' image="../../static/refresh.png" imageWidth="60upx"></unifab>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">{{JobName}}</block>
			<block slot="backText">返回</block>
		</cu-custom>
		<view class=""  style="margin-bottom: 110rpx;">
			<view class="page-box">
					<view class="cu-timeline">
						<view v-if="isOverdue==1" class="cu-time">
							<text class='cuIcon-selection text-white text-lg bg-blue round padding-xs'></text>
							<text  style="color: #e7612e;font-size: 30rpx;" class='text-xl margin-left'>逾期时间段：{{requestData.zhouqi}}</text>
						</view>
						<view v-if="isOverdue!=1" class="cu-time">
							<text class='cuIcon-selection text-white text-lg bg-blue round padding-xs'></text>
							<text style="font-size: 30rpx;" class='text-xl margin-left'>时间段：{{requestData.zhouqi}}</text>
						</view>
					</view>
					<view class="cu-timeline" v-for="(res, index) in qrcodeList" :key="res.Id">
						
						<!--1 未签到, 2 签到中,3 已完结 -->
						<view class="cu-item" :class="res.scanStatus==1?'text-blue':res.scanStatus==2?'text-orange':'text-green'">
							<view class="content">
								<view style="display:flex;justify-content: space-between;" class="cu-capsule radius">
									<view class="cu-capsule radius">
										<view  @click="daoHang(res.qrcode_latitude,res.qrcode_longitude,res.qrcode_des)" class="cu-tag" :class="res.scanStatus==1?'bg-blue':res.scanStatus==2?'bg-orange':'bg-green'">{{res.qrcode_title}}</view>
										<!-- <view @click="wbAfterPhone(res.Id,res.isScan)" :class="res.isBeforeInfo?'line-green':'line-blue'" class=" cu-tag">{{res.isBeforeInfo?'维保前记录':'维保前记录'}}</view> -->
										
										<!-- <view style="padding-left: 30rpx;padding-right: 30rpx;" v-if="res.isScan" class="line-green cu-tag">已维保</view> -->
										<!-- <view class="cu-tag"></view> -->
										<view v-if="res.scanStatus==3" style="margin-left: 20rpx;border-left: 1px solid;" @click="wbSign(res.Id,res.SignId,res.scanStatus,0,true)" :class="res.scanStatus==1?'line-blue':res.scanStatus==2?'line-orange':'line-green'" class="cu-tag">已维保</view>
										<view v-if="res.scanStatus==2" style="margin-left: 20rpx;border-left: 1px solid;" @click="wbSign(res.Id,res.SignId,res.scanStatus,1,false)" :class="res.scanStatus==1?'line-blue':res.scanStatus==2?'line-orange':'line-green'" class="cu-tag">{{res.isScan?'继续填写':'去填写'}}</view>
										<!-- <view v-if="res.scanStatus==1" style="margin-left: 20rpx;border-left: 1px solid;" @click="wbSign(res.Id,res.SignId,res.scanStatus,1)" :class="res.scanStatus==1?'line-blue':res.scanStatus==2?'line-orange':'line-green'" class="cu-tag">{{res.isScan?'继续填写':'去填写'}}</view> -->
										
										<!-- <view style="padding-left: 30rpx;padding-right: 30rpx;" @click="wbSign(res.Id)" v-if="!res.isScan&&isOverdue==1" class="line-blue cu-tag">去补卡</view>
										<view style="padding-left: 30rpx;padding-right: 30rpx;" @click="wbSign(res.Id)" v-if="!res.isScan&&isOverdue!=1" class="line-blue cu-tag">去维保</view> -->
										<view class=""></view>
									</view>
								</view>
								<view class="margin-top text-df text-black">描述：{{res.qrcode_des}}</view>
							</view>
						</view>
					</view>
					<view style="width: 100%;height: 200rpx;"></view>
			</view>
		</view>
	</view>
</template>

<script>
import unifab from "@/components/beyondGod-drag/beyoundGod-drag.vue";	
import request from '@/common/request.js';
export default {
	components: {
			unifab
		},
	data() {
		return {
			isOverdue:1, //是否逾期补卡
			savingRequestData:{
				qrcodeId:'',
				jobId:'',
				longitude:'',
				latitude:'',
				isCheckDevice:true,
				isNFC:false
			},
			reSavingRequestData:{
				signId:'',
				longitude:'',
				latitude:'',
				isNFC:false
			},
			isScan:true,
			orderList: [],
			requestData:{
				JobId:'',
				zhouqi:''
			},
			qrcodeList:[],
			JobName:'维保计划',
			jobId:''
		};
	},
	onLoad(option) {
		let that=this
		let jobId= option.jobId
		that.isOverdue=option.isOverdue
		that.requestData.zhouqi=option.zhouqi
		that.requestData.JobId=jobId;
		that.getQrcodeJob(jobId);
	},
	onShow() {
		let that=this
		uni.$on('update',function(data){
			if(data){
				console.log('update:true'+'onShow')
				that.refresh();
			}
		})
	},
	mounted() {
	},
	computed: {
	},
	methods: {
		daoHang(latitude,longitude,address){
			uni.openLocation({
				latitude: parseFloat(latitude),
				longitude: parseFloat(longitude),
				address: address,
				success: function() {
				},
				fail(err) {
					uni.showToast({ title:err, });
				}
			});
		},
		wbAfterPhone(Id,isScan){
			let that=this
			if(isScan){
				uni.showToast({ title: '维保后无法填写', icon: 'none',duration:2000 });
				return
			}
			let isyuqi=true
			if(that.isOverdue!=1){
				isyuqi=false
			}
			uni.navigateTo({
				url: '/pages-weibao/wbBeforePhone?qrcodeId='+Id+'&jobId='+that.requestData.JobId+'&isyuqi='+isyuqi+'&zhouqi='+that.requestData.zhouqi
			})
		},
		wbSign(qrcodeId,SignId,scanStatus,showButton,onlyShow){
			let that=this
			let isyuqi=true
			if(that.isOverdue!=1){
				isyuqi=false
			}
			console.log(that.requestData.JobId)
			uni.navigateTo({
				url: '/pages-weibao/wbSign?qrcodeId='+qrcodeId+'&jobId='+that.requestData.JobId+'&isyuqi='+isyuqi+'&zhouqi='+that.requestData.zhouqi+'&signId='+SignId+'&scanStatus='+scanStatus+'&showButton='+showButton+'&onlyShow='+onlyShow
			})
		},
		refresh(){
			this.getQrcodeList();
		},
		qrcodeClick() {
			uni.showLoading({
				title: '提交中'
			})
			let that = this;
			 // 只允许通过相机扫码
			 uni.scanCode({
				 onlyFromCamera: true,
				 success: function(res) {
					that.result2 = res.result;
					 
					let qrcodeId=request.getRequest(res.result,'id')
					let isyuqi=true
					if(that.isOverdue!=1){
						isyuqi=false
					}
					uni.getLocation({
						type: 'gcj02',
						isHighAccuracy:true,
						success(locationRes) {
							//校验下点位是否属于这个计划
							let opts111 = {
							 	url: 'SpareApi/ChackQrcodeInJob',
							 	method: 'get'
							};
							let getQrcode={
								qrcodeId:qrcodeId,
								jobId:that.requestData.JobId,
								zhouqi:that.requestData.zhouqi,
								longitude:locationRes.longitude,
								latitude:locationRes.latitude,
								isYuQi:isyuqi
							}
							request.httpTokenRequest(opts111,getQrcode).then(res => {
								if(res.data.code == 1){
									
									console.log('/pages-weibao/wbSign?qrcodeId='+qrcodeId+'&jobId='+that.requestData.JobId+'&isyuqi='+isyuqi+'&zhouqi='+that.requestData.zhouqi+'&signId='+res.data.data.Data+'&scanStatus=2')
									uni.navigateTo({
										url: '/pages-weibao/wbSign?qrcodeId='+qrcodeId+'&jobId='+that.requestData.JobId+'&isyuqi='+isyuqi+'&zhouqi='+that.requestData.zhouqi+'&signId='+res.data.data.Data+'&scanStatus=2'
									})
								}
								else{
									uni.hideLoading();
									//特殊处理，如果是重复巡检，也就是code=399，需要告诉用户是否覆盖原有数据
									if(res.data.code == 399){
										let result399=res.data.data
										//去答题
										let showButton=0
										//1 未签到, 2 签到中,3 已完结
										let scanStatus=1
										//1 填报中，2 已完成
										if(result399.SignStatus==1){
											scanStatus=2
											showButton=1
										}
										if(result399.SignStatus==2){
											scanStatus=3
											showButton=0
											uni.showModal({
												title: '提示',
												content: '确认维保完成了吗？',
												success: function (resSignOK) {
													if (resSignOK.confirm) {
														that.LeaveTimeSign(result399.signId, locationRes.longitude, locationRes.latitude)
													}
												}
											});
										}else{
											console.log('/pages-weibao/wbSign?qrcodeId='+qrcodeId+'&jobId='+that.requestData.JobId+'&isyuqi='+isyuqi+'&zhouqi='+that.requestData.zhouqi+'&signId='+result399.signId+'&scanStatus='+result399.SignStatus)
											
											uni.navigateTo({
												url: '/pages-weibao/wbSign?qrcodeId='+qrcodeId+'&jobId='+that.requestData.JobId+'&isyuqi='+isyuqi+'&zhouqi='+that.requestData.zhouqi+'&signId='+result399.signId+'&scanStatus='+result399.SignStatus
												//url: '/pages/qrcode/qrcodejob/topic?qrcodeid='+qrcodeId+'&signid='+result399.signId+'&noJob=0&scanStatus='+scanStatus+'&showButton='+showButton
											})
										}
									}else{
										uni.showToast({ title: res.data.msg, icon: 'none' });
									}
								}
							});
							
						},fail() {
							uni.showToast({ title: '请开启定位', icon: 'error',duration:2000 });
						}
					})
					
				 },fail() {
					uni.hideLoading();
				 }
			 });
		},
		
		LeaveTimeSign(signId,longitude,latitude){
			var that = this;
			let opts = {
				url: 'api/LeaveTimeSign',
				method: 'get'
			};
			let params={
				signId:signId,
				longitude:longitude,
				latitude:latitude
			};
			request.httpTokenRequest(opts,params).then(res => {
				uni.hideLoading();
				if(res.data.code == 1){
					console.log("成功进来了")
					uni.showToast({ title: '成功', icon: 'success',duration:2000 });
					setTimeout(function() {
						that.refresh()
					}, 2000); 
				}
				else{
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			});
		},
		getQrcodeJob(loadJobId){
			let that=this
			let jobId=''
			
			that.orderList=[]
			let opts = {
				url: 'api/GetQrcodeJob',
				method: 'get'
			};
			let params={
				JobType:2,
				JobId:loadJobId
			}
			request.httpTokenRequest(opts,params).then(res => {
				if(res.data.code == 1){
					if(res.data.data.length>0){
						let jobEntity=res.data.data[0]
						that.JobName=jobEntity.JobName;
						that.orderList.push(res.data.data);
						that.getQrcodeList();
					}
				}
				else{
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			});
		},
		getQrcodeList(){
			console.log('getQrcodeList')
			uni.showLoading({
				title: '加载中'
			})
			let that=this
			let opts = {
				url: 'SpareApi/GetQrcode',
				method: 'get'
			};
			that.qrcodeList=[]
			request.httpTokenRequest(opts,that.requestData).then(res => {
				uni.hideLoading();
				if(res.data.code == 1){
					that.qrcodeList=[]
					that.qrcodeList=res.data.data;
				}
				else{
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */
</style>

<style lang="scss" scoped>
.page-box{
	overflow: hidden;
}
.cu-capsule{
	border-radius: 10rpx;
}
.padding-xl{
	height:auto;
	padding: 10px 24px;
}
.cu-dialog{
	height: auto;
}
.checkJob{
	width:80px;
	float:right;
}
.order {
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 15rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			.store {
				margin: 0 10rpx;
				font-size: 34rpx;
				font-weight: bold;
			}
		}
		.right {
			color: $u-type-warning-dark;
			.progressBox{
				width: 150rpx;
				float: right;
				.btn {
					line-height: 52rpx;
					width: 140rpx;
					border-radius: 12rpx;
					border: 2rpx solid $u-tips-color;
					font-size: 26rpx;
					text-align: center;
					color: $u-tips-color;
				}
				.evaluate {
					color: $u-type-primary;
					border-color: $u-type-primary;
				}
			}
		}
	}
	.item {
		display: flex;
		margin: 20rpx 0 0;
		.left {
			margin-right: 20rpx;
			image {
				width: 260rpx;
				height: 190rpx;
				border-radius: 10rpx;
			}
		}
		.content {
			.title {
				font-size: 28rpx;
				line-height: 45rpx;
			}
			.type {
				margin: 6rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				line-clamp: 3;
				-webkit-box-orient: vertical;
			}
			.delivery-time {
				color: #0081ff;
				font-size: 24rpx;
			}
		}
		.right {
			margin-left: 10rpx;
			padding-top: 20rpx;
			text-align: right;
			.decimal {
				font-size: 24rpx;
				margin-top: 4rpx;
			}
			.number {
				color: $u-tips-color;
				font-size: 24rpx;
			}
		}
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		.total-price {
			font-size: 32rpx;
		}
	}
	.bottom {
		line-height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.btnBox{
			width: 150rpx;
			display: flex;
			justify-content: space-between;
			.btn {
				line-height: 52rpx;
				width: 140rpx;
				border-radius: 12rpx;
				border: 2rpx solid $u-tips-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-tips-color;
			}
			.evaluate {
				color: $u-type-primary;
				border-color: $u-type-primary;
			}
		}
	}
}
.centre {
	text-align: center;
	margin: 200rpx auto;
	font-size: 32rpx;
	image {
		width: 300rpx;
		border-radius: 50%;
		margin: 0 auto;
	}
	.tips {
		font-size: 24rpx;
		color: #999999;
		margin-top: 20rpx;
	}
	.btn {
		margin: 80rpx auto;
		width: 200rpx;
		border-radius: 32rpx;
		line-height: 64rpx;
		color: #ffffff;
		font-size: 26rpx;
		background: linear-gradient(270deg, #1cbbb4 0%, #0081ff 100%);
	}
}
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
}
.cu-timeline .cu-time {
		width: 100%;
		text-align: left;
		padding: 20rpx 0 20rpx 37rpx;
		font-size: 26rpx;
		color: #888;
		display: block;
	}

	.text-red,
	.line-red,
	.lines-red {
		color: #FF3434;
	}

	.margin-avatar {
		margin-left: -15rpx;
	}

	.margin-avatar-bottom {
		margin-bottom: 150rpx;
	}

	.line-blue-tuniao::after {
		border-color: #0070ff !important;
		color: #0070ff;
	}

	.resume {
		/* background: #f1f1f1; */
		padding-top: 10rpx;
		border-radius: 6rpx;
		display: block;
		color: #666;
		line-height: 1.6;
	}

	.resume+.resume {
		margin-top: 20rpx;
	}

	.resume2 {
		padding-top: 10rpx;
		border-radius: 6rpx;
		display: block;
		color: #666;
		line-height: 1.6;
	}

	.edit {
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		bottom: 250rpx;
		right: 30rpx;
		z-index: 1;
		opacity: 0.8;
		border: 1px solid #189eff;
		border-radius: 100rpx;
		box-shadow: 0rpx 0rpx 6rpx rgba(24, 158, 255, 1);
		padding: 20rpx;
	}

	.love {
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		bottom: 550rpx;
		right: 30rpx;
		z-index: 1024;
		opacity: 0.8;
		border: 1px solid #189eff;
		border-radius: 100rpx;
		box-shadow: 0rpx 0rpx 6rpx rgba(24, 158, 255, 1);
		padding: 20rpx;
	}

	.bg-img-cont {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height: 350rpx;
	}

	.share-png {
		width: 100rpx;
		height: 100rpx;
		margin: 0 auto;
	}

	.share-wechat {
		width: 35rpx;
		height: 35rpx;
		margin: 0 10rpx -4rpx 0;
		opacity: 0.5;
	}

	.button-no::after {
		border: none;
	}

	.title-pyq {
		background-image: -webkit-linear-gradient(0deg, #1b6cff, #1ca5ff);
		/*1B6CFF 1B42FF*/
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		opacity: 0.5;
	}

	.edit-fixed {
		position: fixed;
		width: 100%;
		bottom: 48px;
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.button-no {
		border: none;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
	}

	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 300rpx;
			border-radius: 50%;
			margin: 0 auto;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg, #1cbbb4 0%, #0081ff 100%);
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}
</style>
